<template>
  <div
    class="main-content"
    :style="{
      ...mainContentStyle,
      ...fullscreenMainContentStyle
    }"
  >
    <div class="main-content-header" v-if="headerVisible" :style="headerStyle">
      <slot name="headerLeft">
        <div class="main-content-header-title">
          {{
            title && title.length > 0
              ? title
              : route.meta && route.meta.title
              ? route.meta.title
              : ''
          }}
        </div>
      </slot>
      <slot name="headerCenter"> </slot>

      <div class="main-content-header-right">
        <slot name="headerRight"> </slot>

        <div
          class="main-content-header-right-btn main-content-header-right-btn-full"
          v-ripple
          @click="fullscreenToggle"
        >
          <DynamicIcon :icon="fullscreenState ? 'SvgIconFullScreenExit' : 'FullScreen'" />
        </div>

        <div
          class="main-content-header-right-btn main-content-header-right-btn-close"
          v-ripple
          v-if="closeVisible && !(route.path === homePath && visitedViews.length == 1)"
          @click="close"
        >
          <DynamicIcon icon="Close" />
        </div>
      </div>
    </div>
    <div
      class="main-content-body"
      :style="{
        height: ` calc(100% - ${headerVisible ? 'var(--main-content-header-height)' : '0px'})`,
        ...bodyStyle
      }"
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Environments, ripple, useEventBusEmit } from 'hippo-module-core'
import { MainContentProps } from '../../props/main-content-props'
import { useRoute } from 'vue-router'
import { computed, ref } from 'vue'
import { useDesktopLayoutStore } from '../../stores'

defineProps(MainContentProps)

const vRipple = ripple

const fullscreenState = ref(false)

const homePath = Environments.getEvnProp('VITE_HOME_ROUTER')

const route = useRoute()
const useDesktopLayout = useDesktopLayoutStore()

const visitedViews: any = computed(() => {
  return useDesktopLayout.getVisitedViews
})

const fullscreenMainContentStyle = ref({})

const close = () => {
  useEventBusEmit('desktopToolbarCloseSelectedTab')
}

const fullscreenToggle = () => {
  fullscreenState.value = !fullscreenState.value
  if (fullscreenState.value) {
    fullscreenMainContentStyle.value = {
      width:
        'calc(100%  + var(--desktop-layout-main-padding) + var(--desktop-layout-main-padding))',
      height:
        'calc(100%  + var(--desktop-layout-main-padding) + var(--desktop-layout-main-padding) - 0.5px)',
      marginLeft: 'calc(var(--desktop-layout-main-padding) * -1)',
      marginTop: 'calc(var(--desktop-layout-main-padding) * -1 + 0.5px)',
      borderRadius:0
    }
  } else {
    fullscreenMainContentStyle.value = {}
  }
}
</script>

<style scoped lang="scss">
@import './MainContent.scss';
</style>
